<!DOCTYPE html>
<html>
<head>
    <title>帖子详情 - FinData</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background-color: #0a0a0a;
            color: #e0e0e0;
        }
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 30px;
            background-color: #121212;
            border-bottom: 1px solid #333;
        }
        .logo-container {
            display: flex;
            align-items: center;
        }
        .logo {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.7));
            animation: pulse 2s infinite alternate;
        }
        .logo-text {
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(90deg, #8a2be2, #a855f7, #c084fc);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
            animation: shine 3s linear infinite;
            margin-right: auto;
            padding-left: 15px;
        }
        .nav-container {
            display: flex;
            gap: 20px;
        }
        .nav-item {
            position: relative;
            padding: 10px 20px;
            background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #e0e0e0;
            text-decoration: none;
            overflow: hidden;
            z-index: 1;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .nav-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #8a2be2, #00bfff);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .nav-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(138, 43, 226, 0.3);
            color: white;
        }
        .nav-item:hover::before {
            opacity: 1;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background: #4CAF50;
            transition: all 0.3s ease;
        }
        .nav-item:hover::after {
            width: 70%;
            left: 15%;
        }
        .nav-item.active {
            background-color: #8a2be2;
        }
        
        /* 帖子详情页样式 */
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        .post-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
        }
        .post-back-btn {
            padding: 10px 20px;
            background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
            color: #e0e0e0;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            position: absolute;
            left: 0;
            z-index: 1;
        }
        .post-back-btn i {
            margin-right: 8px;
            transition: transform 0.3s ease;
        }
        .post-back-btn:hover {
            background: linear-gradient(145deg, #252525, #333333);
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }
        .post-back-btn:hover i {
            transform: translateX(-3px);
        }
        .post-content-container {
            background: linear-gradient(145deg, #121212, #1a1a1a);
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.6s ease-out;
            position: relative;
            overflow: hidden;
            border-left: 3px solid #8a2be2;
        }
        .post-content-container::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(138, 43, 226, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            opacity: 0.5;
        }
        .post-title {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 15px;
            background: linear-gradient(90deg, #e0e0e0, #a0a0a0);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
            text-align: center;
            width: 100%;
            padding: 0 70px;
        }
        .post-meta {
            display: flex;
            font-size: 14px;
            color: #888;
            margin-bottom: 20px;
            align-items: center;
        }
        .post-author, .post-date, .post-views {
            margin-right: 20px;
            display: flex;
            align-items: center;
        }
        .post-author i, .post-date i, .post-views i {
            margin-right: 5px;
        }
        .post-content {
            margin: 20px 0;
            line-height: 1.6;
            font-size: 16px;
            color: #e0e0e0;
            white-space: pre-wrap;
        }
        .post-actions {
            display: flex;
            gap: 25px;
            margin-top: 25px;
            justify-content: center;
        }
        .post-like-btn, .post-comment-btn, .post-report-btn, .post-edit-btn, .post-delete-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #1e1e1e;
            color: #888;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid #333;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        .post-like-btn i, .post-comment-btn i, .post-report-btn i, .post-edit-btn i, .post-delete-btn i {
            font-size: 22px;
        }
        .post-like-btn:hover {
            background-color: #2a2a2a;
            color: #f44336;
            border-color: #f44336;
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
        }
        .post-comment-btn:hover {
            background-color: #2a2a2a;
            color: #2196F3;
            border-color: #2196F3;
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
        }
        .post-report-btn:hover {
            background-color: #2a2a2a;
            color: #FFC107;
            border-color: #FFC107;
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
        }
        .post-edit-btn:hover {
            background-color: #2a2a2a;
            color: #4CAF50;
            border-color: #4CAF50;
        }
        .post-delete-btn:hover {
            background-color: #2a2a2a;
            color: #f44336;
            border-color: #f44336;
        }
        
        /* 标签样式 */
        .post-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0;
        }
        .post-tag {
            padding: 5px 12px;
            background: rgba(138, 43, 226, 0.2);
            border: 1px solid rgba(138, 43, 226, 0.3);
            border-radius: 20px;
            font-size: 13px;
            color: #a855f7;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
        }
        .post-tag:hover {
            background: rgba(138, 43, 226, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(138, 43, 226, 0.3);
        }
        
        /* 评论区样式 */
        .comments-container {
            background: linear-gradient(145deg, #121212, #1a1a1a);
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.8s ease-out;
            border-left: 3px solid #00bfff;
            margin-top: 40px;
        }
        .comments-header {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #e0e0e0;
            display: flex;
            align-items: center;
        }
        .comments-count {
            margin-left: 10px;
            font-size: 16px;
            color: #888;
        }
        .comment-form {
            margin-bottom: 25px;
        }
        .comment-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #333;
            border-radius: 8px;
            background-color: #1a1a1a;
            color: #e0e0e0;
            font-size: 14px;
            margin-bottom: 12px;
            resize: none;
            min-height: 80px;
            box-sizing: border-box;
            transition: all 0.3s ease;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        .comment-input:focus {
            outline: none;
            border-color: #8a2be2;
            box-shadow: 0 0 10px rgba(138, 43, 226, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.2);
            transform: translateY(-1px);
        }
        .comment-submit {
            padding: 8px 20px;
            background: linear-gradient(45deg, #8a2be2, #a855f7);
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            position: relative;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(138, 43, 226, 0.3);
            z-index: 1;
            font-size: 14px;
            float: right;
        }
        .comment-submit::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.5s ease;
            z-index: -1;
        }
        .comment-submit:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 20px rgba(138, 43, 226, 0.5);
        }
        .comment-submit:hover::before {
            left: 100%;
        }
        .comments-list {
            margin-top: 20px;
        }
        .comment-item {
            animation: slideInRight 0.5s ease forwards;
            animation-delay: calc(0.1s * var(--index, 0));
            opacity: 0;
        }
        .comment-item:hover {
            transform: translateX(5px);
            background-color: rgba(26, 26, 26, 0.5);
            border-left: 3px solid #00bfff;
            padding-left: 15px;
        }
        .comment-user {
            font-weight: bold;
            margin-bottom: 5px;
            color: #e0e0e0;
        }
        .comment-content {
            margin-bottom: 10px;
            color: #ccc;
            white-space: pre-wrap;
        }
        .comment-date {
            font-size: 12px;
            color: #888;
        }
        .no-comments {
            color: #888;
            font-style: italic;
            text-align: center;
            padding: 20px 0;
        }
        
        /* 登录提示模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: #1a1a1a;
            border-radius: 10px;
            padding: 30px;
            width: 400px;
            text-align: center;
            box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
        }
        .modal-icon {
            margin-bottom: 20px;
        }
        .modal-title {
            font-size: 20px;
            margin-bottom: 10px;
            color: #e0e0e0;
        }
        .modal-message {
            color: #aaa;
            margin-bottom: 20px;
        }
        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .modal-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
        }
        .cancel-btn {
            background-color: #333;
            color: #e0e0e0;
        }
        .cancel-btn:hover {
            background-color: #444;
        }
        .login-btn {
            background-color: #8a2be2;
            color: white;
        }
        .login-btn:hover {
            background-color: #7928a1;
        }
        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            color: #aaa;
            cursor: pointer;
            transition: all 0.3s;
        }
        .close-btn:hover {
            color: white;
        }
        
        /* 成功模态框样式 */
        .success-icon {
            animation: successPop 0.5s ease-out forwards;
        }
        
        .modal-progress {
            width: 100%;
            height: 6px;
            background-color: #2a2a2a;
            border-radius: 3px;
            margin-top: 20px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #52c41a, #73d13d);
            border-radius: 3px;
            transition: width 3s linear;
        }
        
        @keyframes successPop {
            0% { transform: scale(0.5); opacity: 0; }
            70% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        /* 加载中状态 */
        .loading {
            text-align: center;
            padding: 30px;
            color: #888;
        }
        .loading i {
            margin-right: 10px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 动画 */
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            100% {
                transform: scale(1.1);
                opacity: 1;
                filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.9));
            }
        }
        
        /* 点赞心形动画 */
        @keyframes heartPulse {
            0% {
                transform: scale(1);
                color: white;
            }
            25% {
                transform: scale(1.5);
                color: #ff4d4f;
            }
            50% {
                transform: scale(1.2);
                color: #ff4d4f;
            }
            75% {
                transform: scale(1.4);
                color: #ff4d4f;
            }
            100% {
                transform: scale(1);
                color: white;
            }
        }
        @keyframes shine {
            to {
                background-position: 200% center;
            }
        }
        
        /* 新增动效 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes glowPulse {
            0% { box-shadow: 0 0 5px rgba(138, 43, 226, 0.3); }
            50% { box-shadow: 0 0 15px rgba(138, 43, 226, 0.7); }
            100% { box-shadow: 0 0 5px rgba(138, 43, 226, 0.3); }
        }
        
        /* 举报模态框样式 */
        .report-form {
            margin: 20px 0;
            text-align: left;
        }
        .report-reason-container, .report-detail-container {
            margin-bottom: 15px;
        }
        .report-reason-container label, .report-detail-container label {
            display: block;
            margin-bottom: 5px;
            color: #e0e0e0;
        }
        .report-reason {
            width: 100%;
            padding: 10px;
            background-color: #1a1a1a;
            border: 1px solid #333;
            border-radius: 5px;
            color: #e0e0e0;
        }
        .report-detail {
            width: 100%;
            height: 100px;
            padding: 10px;
            background-color: #1a1a1a;
            border: 1px solid #333;
            border-radius: 5px;
            color: #e0e0e0;
            resize: none;
        }
        .report-btn {
            background-color: #ff4d4f;
            color: white;
        }
        .report-btn:hover {
            background-color: #cf1322;
        }
        
        /* 帖子图片样式 */
        .post-images {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin: 20px 0;
        }
        .post-image-wrapper {
            flex: 0 0 calc(33.33% - 10px);
            max-width: calc(33.33% - 10px);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 15px;
            position: relative;
        }
        .post-image-wrapper:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(138, 43, 226, 0.4);
        }
        .post-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
            cursor: pointer;
        }
        .post-image.image-error {
            object-fit: contain;
            background-color: #1a1a1a;
            padding: 10px;
        }
        /* 响应式布局 */
        @media (max-width: 768px) {
            .post-image-wrapper {
                flex: 0 0 calc(50% - 10px);
                max-width: calc(50% - 10px);
            }
        }
        @media (max-width: 480px) {
            .post-image-wrapper {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }
        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .lightbox.active {
            opacity: 1;
            pointer-events: auto;
        }
        .lightbox-image {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }
        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 30px;
            cursor: pointer;
            z-index: 1001;
        }
        .lightbox-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            box-sizing: border-box;
            transform: translateY(-50%);
            z-index: 1001;
        }
        .lightbox-prev, .lightbox-next {
            color: white;
            font-size: 40px;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.5);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.3s ease;
        }
        .lightbox-prev:hover, .lightbox-next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        
        /* 点赞动画专用类 */
        .heart-pulse {
            animation: heartPulse 0.8s ease-in-out;
            animation-fill-mode: forwards;
        }
        .post-author-actions {
            display: flex;
            margin-left: auto;
        }
        
        /* 美观的消息提示样式 */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 280px;
            width: 100%;
        }
        
        .toast {
            padding: 10px 15px;
            border-radius: 8px;
            background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
            color: #e0e0e0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            animation: slideInRight 0.3s ease, fadeOut 0.3s ease 2.7s;
            opacity: 0;
            transform: translateX(100%);
            overflow: hidden;
            position: relative;
        }
        
        .toast.success {
            border-left: 3px solid #4CAF50;
        }
        
        .toast.success .toast-icon {
            color: #4CAF50;
        }
        
        .toast.error {
            border-left: 3px solid #F44336;
        }
        
        .toast.error .toast-icon {
            color: #F44336;
        }
        
        .toast.warning {
            border-left: 3px solid #FFC107;
        }
        
        .toast.warning .toast-icon {
            color: #FFC107;
        }
        
        .toast.info {
            border-left: 3px solid #2196F3;
        }
        
        .toast.info .toast-icon {
            color: #2196F3;
        }
        
        .toast-icon {
            font-size: 16px;
            margin-right: 10px;
        }
        
        .toast-content {
            flex: 1;
        }
        
        .toast-title {
            font-weight: bold;
            margin-bottom: 2px;
            font-size: 14px;
        }
        
        .toast-message {
            font-size: 12px;
            opacity: 0.9;
        }
        
        .toast-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: rgba(255, 255, 255, 0.3);
            width: 100%;
        }
        
        .toast-progress::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6));
            animation: progress 1.5s linear;
            transform-origin: left;
        }
        
        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(10%);
            }
        }
        
        @keyframes progress {
            from { transform: scaleX(1); }
            to { transform: scaleX(0); }
        }
        
        /* 编辑表单样式 */
        .edit-form {
            background-color: #1e1e1e;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        }
        .edit-form h2 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #e0e0e0;
        }
        
        .post-like-btn.liked {
            color: #f44336;
            border-color: #f44336;
            background-color: rgba(244, 67, 54, 0.1);
            box-shadow: 0 0 10px rgba(244, 67, 54, 0.3);
        }
        
        .post-like-btn.liked i {
            animation: heartPulse 0.8s ease-in-out;
            animation-fill-mode: forwards;
        }
        
        /* 免责声明和版权信息样式 */
        .disclaimer-container {
            background-color: rgba(18, 18, 18, 0.8);
            border-radius: 8px;
            padding: 15px;
            margin: 30px auto;
            max-width: 900px;
            border-top: 1px solid #333;
        }
        
        .disclaimer-text {
            font-size: 12px;
            color: #888;
            text-align: center;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        
        .copyright {
            font-size: 12px;
            color: #666;
            text-align: center;
            margin-top: 10px;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- Toast消息容器 -->
    <div class="toast-container" id="toastContainer"></div>
    
    <div class="header">
        <div class="logo-container">
            <svg class="logo" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 0 L40 20 L20 40 L0 20 Z" fill="#8a2be2"/>
                <path d="M10 10 L30 10 L30 30 L10 30 Z" fill="#00bfff"/>
                <path d="M15 15 L25 15 L25 25 L15 25 Z" fill="#4CAF50"/>
            </svg>
            <div class="logo-text">FinData</div>
        </div>
        
        <div class="nav-container">
            <a class="nav-item" href="/blank" id="homeNav">首页</a>
            <a class="nav-item" href="/favorites" id="favoritesNav">自选</a>
            <a class="nav-item" href="/data" id="dataNav">数据</a>
            <a class="nav-item" href="javascript:void(0)" onclick="checkLoginForBacktest()" id="backtestNav">回测</a>
            <a class="nav-item active" href="/forum" id="forumNav">论坛</a>
            <a class="nav-item" style="display: none;" href="/dashboard" id="dashboardNav">个人中心</a>
        </div>
    </div>

    <div class="container">
        <div class="post-header">
            <a href="/forum" class="post-back-btn"><i class="fas fa-arrow-left"></i> 返回论坛</a>
            <div class="post-title" id="postTitle">加载中...</div>
        </div>
        
        <div class="post-content-container">
            <div class="post-meta">
                <div class="post-author" id="postAuthor"><i class="fas fa-user"></i> 加载中...</div>
                <div class="post-date" id="postDate"><i class="far fa-clock"></i> 加载中...</div>
                <div class="post-views" id="postViews"><i class="fas fa-eye"></i> 加载中...</div>
            </div>
            <div class="post-tags" id="postTags">
                <!-- 标签将在这里动态添加 -->
            </div>
            <div class="post-content" id="postContent">加载中...</div>
            
            <!-- 帖子图片区域 -->
            <div class="post-images" id="post-images"></div>
            
            <div class="post-actions">
                <button class="post-like-btn" id="likeBtn" onclick="toggleLike()">
                    <i class="far fa-heart"></i>
                </button>
                <button class="post-comment-btn" onclick="focusCommentInput()">
                    <i class="far fa-comment"></i>
                </button>
                <button class="post-report-btn" id="reportBtn" onclick="showReportModal()">
                    <i class="fas fa-flag"></i>
                </button>
            </div>
        </div>
        
        <div class="comments-container">
            <div class="comments-header">
                评论 <span class="comments-count" id="commentsCount">0</span>
            </div>
            
            <div class="comment-form" id="commentForm">
                <textarea class="comment-input" id="commentInput" placeholder="发表你的评论..."></textarea>
                <button class="comment-submit" id="commentSubmit">发表评论</button>
                <div style="clear: both;"></div>
            </div>
            
            <div id="login-tip" style="display: none; text-align: center; padding: 15px; color: #888;">
                请<a href="/login" style="color: #8a2be2; text-decoration: none;">登录</a>后发表评论
            </div>
            
            <div class="comments-list" id="commentsList">
                <div class="loading">
                    <i class="fas fa-spinner"></i> 加载评论中...
                </div>
            </div>
        </div>
    </div>
    
    <!-- 登录提示模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal()">&times;</span>
            <div class="modal-icon">
                <svg viewBox="0 0 24 24" width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#8a2be2" stroke-width="2"/>
                    <path d="M12 16V12M12 8H12.01" stroke="#8a2be2" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </div>
            <h3 class="modal-title">需要登录</h3>
            <p class="modal-message" id="modalMessage">请先登录后再进行操作</p>
            <div class="modal-buttons">
                <button class="modal-btn cancel-btn" onclick="closeModal()">取消</button>
                <button class="modal-btn login-btn" onclick="goToLogin()">立即登录</button>
            </div>
        </div>
    </div>
    
    <!-- 举报模态框 -->
    <div id="reportModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeReportModal()">&times;</span>
            <div class="modal-icon">
                <i class="fas fa-flag" style="font-size: 36px; color: #ff4d4f;"></i>
            </div>
            <h3 class="modal-title">举报帖子</h3>
            <div class="report-form">
                <div class="report-reason-container">
                    <label>举报原因：</label>
                    <select id="reportReason" class="report-reason">
                        <option value="">请选择举报原因</option>
                        <option value="垃圾广告">垃圾广告</option>
                        <option value="色情内容">色情内容</option>
                        <option value="政治敏感">政治敏感</option>
                        <option value="侮辱谩骂">侮辱谩骂</option>
                        <option value="违法信息">违法信息</option>
                        <option value="其他原因">其他原因</option>
                    </select>
                </div>
                <div class="report-detail-container">
                    <label>详细说明：</label>
                    <textarea id="reportDetail" class="report-detail" placeholder="请详细描述举报原因（选填）"></textarea>
                </div>
            </div>
            <div class="modal-buttons">
                <button class="modal-btn cancel-btn" onclick="closeReportModal()">取消</button>
                <button class="modal-btn report-btn" id="submitReportBtn">提交举报</button>
            </div>
        </div>
    </div>

    <!-- 灯箱组件 -->
    <div class="lightbox" id="lightbox">
        <div class="lightbox-close" id="lightbox-close">&times;</div>
        <div class="lightbox-nav">
            <div class="lightbox-prev" id="lightbox-prev"><i class="fas fa-chevron-left"></i></div>
            <div class="lightbox-next" id="lightbox-next"><i class="fas fa-chevron-right"></i></div>
        </div>
        <img class="lightbox-image" id="lightbox-image" src="" alt="图片预览">
    </div>

    <!-- 禁言提示模态框 -->
    <div id="muteModal" class="modal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); align-items: center; justify-content: center;">
        <div class="modal-content" style="background: linear-gradient(145deg, #151515, #1e1e1e); border-radius: 15px; max-width: 500px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); overflow: hidden; animation: fadeIn 0.4s; position: relative; border-left: 3px solid #dc3545;">
            <div class="modal-header" style="padding: 15px 20px; text-align: center; border-bottom: 1px solid #333; background: rgba(220, 53, 69, 0.1);">
                <h3 style="margin: 0; color: #dc3545; font-weight: 600;">账户已被禁言</h3>
            </div>
            <div class="modal-body" style="padding: 20px 25px; display: flex; flex-direction: column; align-items: center;">
                <div style="display: flex; align-items: center; margin-bottom: 20px;">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" style="margin-right: 15px;">
                        <circle cx="12" cy="12" r="10" stroke="#dc3545" stroke-width="2"/>
                        <path d="M15 9L9 15" stroke="#dc3545" stroke-width="2" stroke-linecap="round"/>
                        <path d="M9 9L15 15" stroke="#dc3545" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                    <p id="muteMessage" style="margin: 0; font-size: 16px; color: #e0e0e0;">您的账户已被禁言，无法发言。</p>
                </div>
                <div style="background: rgba(220, 53, 69, 0.1); padding: 15px; border-radius: 8px; width: 100%; margin-bottom: 15px;">
                    <div style="margin-bottom: 10px;">
                        <span style="font-weight: 600; color: #aaa;">禁言原因:</span>
                        <p id="muteReason" style="margin: 5px 0 0 0; color: #e0e0e0;"></p>
                    </div>
                </div>
                <p style="color: #aaa; font-size: 0.9rem; text-align: center; margin-bottom: 20px;">
                    如有疑问，请联系管理员获取帮助。
                </p>
            </div>
            <div class="modal-footer" style="padding: 15px 20px; border-top: 1px solid #333; text-align: center;">
                <button id="closeMuteBtn" style="background: linear-gradient(90deg, #dc3545, #c82333); border: none; padding: 8px 25px; border-radius: 50px; color: white; cursor: pointer; transition: all 0.3s ease;">我知道了</button>
            </div>
        </div>
    </div>

    <script>
        let isLoggedIn = false;
        let userId = null;
        let username = null;
        let postId = null;
        let isLiked = false;
        let currentImageIndex = 0; // 当前查看的图片索引
        
        document.addEventListener('DOMContentLoaded', function() {
            // 获取帖子ID
            const pathParts = window.location.pathname.split('/');
            postId = pathParts[pathParts.length - 1];
            console.log('当前帖子ID:', postId);
            
            // 确保初始化时移除所有可能的动画状态
            const heartIcon = document.querySelector('#likeBtn i');
            if (heartIcon) {
                heartIcon.classList.remove('heart-pulse');
                console.log('页面加载时移除动画状态');
            }
            
            // 添加全局错误处理器，捕获所有未处理的错误
            window.onerror = function(message, source, lineno, colno, error) {
                console.error('全局错误:', message);
                console.error('错误来源:', source);
                console.error('行号:', lineno);
                console.error('列号:', colno);
                console.error('错误对象:', error);
                return false;
            };
            
            // 监听所有fetch请求
            const originalFetch = window.fetch;
            window.fetch = function(url, options) {
                console.log('发起请求:', url, options);
                return originalFetch(url, options)
                    .then(response => {
                        console.log('请求完成:', url, response.status);
                        return response;
                    })
                    .catch(error => {
                        console.error('请求失败:', url, error);
                        throw error;
                    });
            };
            
            checkLoginStatus();
            loadPostDetails();
            loadComments();
            
            // 绑定评论提交按钮点击事件
            document.getElementById('commentSubmit').addEventListener('click', submitComment);
            
            // 绑定评论输入框点击事件
            document.getElementById('commentInput').addEventListener('click', function() {
                if (!isLoggedIn) {
                    showLoginModal('请先登录后再评论');
                    return false;
                }
            });
            
            // 绑定举报提交按钮点击事件
            document.getElementById('submitReportBtn').addEventListener('click', submitReport);
            
            // 绑定灯箱关闭事件
            document.getElementById('lightbox-close').addEventListener('click', closeLightbox);
            document.getElementById('lightbox').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeLightbox();
                }
            });
            
            // 绑定灯箱导航事件
            document.getElementById('lightbox-prev').addEventListener('click', function(e) {
                e.stopPropagation();
                showPrevImage();
            });
            document.getElementById('lightbox-next').addEventListener('click', function(e) {
                e.stopPropagation();
                showNextImage();
            });
            
            // 键盘导航
            document.addEventListener('keydown', function(e) {
                if (document.getElementById('lightbox').classList.contains('active')) {
                    if (e.key === 'Escape') {
                        closeLightbox();
                    } else if (e.key === 'ArrowLeft') {
                        showPrevImage();
                    } else if (e.key === 'ArrowRight') {
                        showNextImage();
                    }
                }
            });

            // 初始化禁言模态框
            document.getElementById('closeMuteBtn').addEventListener('click', function() {
                document.getElementById('muteModal').style.display = 'none';
            });
        });
        
        // 检查用户登录状态
        function checkLoginStatus() {
            fetch('/api/user-info')
                .then(response => {
                    if (response.status === 200) {
                        isLoggedIn = true;
                        return response.json();
                    } else {
                        isLoggedIn = false;
                        document.getElementById('commentForm').style.display = 'none';
                        document.getElementById('login-tip').style.display = 'block';
                        throw new Error('未登录');
                    }
                })
                .then(data => {
                    userId = data.UserId;
                    username = data.username;
                    document.getElementById('commentForm').style.display = 'block';
                    document.getElementById('login-tip').style.display = 'none';
                    
                    // 如果已登录，检查是否已点赞
                    checkLikeStatus();
                })
                .catch(error => {
                    console.log('未登录或获取用户信息失败:', error);
                });
        }
        
        // 加载帖子详情
        function loadPostDetails() {
            fetch(`/api/forum/posts/${postId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取帖子详情失败');
                    }
                    return response.json();
                })
                .then(post => {
                    console.log('获取到帖子数据:', post);
                    
                    // 存储帖子数据到全局变量
                    window.postData = post;
                    
                    // 显示帖子内容
                    displayPostContent(post);
                    
                    // 更新页面标题
                    document.title = `${post.title} - FinData论坛`;
                    
                    // 检查点赞状态
                    if (isLoggedIn) {
                        checkLikeStatus();
                    }
                    
                    // 加载评论
                    loadComments();
                })
                .catch(error => {
                    console.error('加载帖子失败:', error);
                    document.getElementById('postContent').textContent = '加载帖子失败，请检查链接是否正确或稍后再试。';
                });
        }
        
        // 显示帖子内容和图片
        function displayPostContent(post) {
            document.getElementById('postTitle').textContent = post.title;
            document.getElementById('postContent').innerHTML = post.content;
            document.getElementById('postDate').textContent = formatDate(post.createdAt);
            document.getElementById('postAuthor').innerHTML = '<i class="fas fa-user"></i> ' + (post.username || '匿名用户');
            document.getElementById('postViews').innerHTML = '<i class="fas fa-eye"></i> ' + (post.viewCount || 0);
            
            // 更新评论数
            const commentsCount = document.getElementById('commentsCount');
            if (commentsCount) {
                commentsCount.textContent = post.commentCount || 0;
            }
            
            // 显示标签
            const tagsContainer = document.getElementById('postTags');
            tagsContainer.innerHTML = '';
            if (post.tags && post.tags.length > 0) {
                post.tags.forEach(tag => {
                    const tagElem = document.createElement('div');
                    tagElem.className = 'post-tag';
                    tagElem.textContent = tag;
                    tagElem.addEventListener('click', function() {
                        window.location.href = `/forum?tag=${encodeURIComponent(tag)}`;
                    });
                    tagsContainer.appendChild(tagElem);
                });
            } else {
                tagsContainer.style.display = 'none';
            }
            
            // 显示图片
            const imagesContainer = document.getElementById('post-images');
            imagesContainer.innerHTML = '';
            if (post.images && post.images.length > 0) {
                console.log('帖子包含图片:', post.images);
                
                post.images.forEach((image, index) => {
                    // 修正图片路径
                    if (!image) {
                        console.error('图片对象为空:', index);
                        return;
                    }
                    
                    // 支持两种可能的属性名：image_path或imagePath
                    let imagePath = image.image_path || image.imagePath;
                    if (!imagePath) {
                        console.error('图片路径为空:', image);
                        imagePath = '/static/uploads/default-image-error.jpg'; // 使用相同的默认错误图片路径
                    } else {
                        console.log('原始图片路径:', imagePath);
                        
                        // 修正图片路径处理逻辑
                        if (!imagePath.startsWith('http://') && !imagePath.startsWith('https://')) {
                            // 如果是相对路径，需要处理
                            if (imagePath.startsWith('/uploads/')) {
                                // 将/uploads/转换为/static/uploads/
                                imagePath = '/static' + imagePath;
                                console.log('修正后的图片路径:', imagePath);
                            } else if (!imagePath.startsWith('/static/')) {
                                // 如果既不是以/static/开头，也不是以/uploads/开头，则添加/static/前缀
                                imagePath = '/static' + (imagePath.startsWith('/') ? '' : '/') + imagePath;
                                console.log('修正后的图片路径:', imagePath);
                            }
                        }
                    }
                    
                    const imageWrapper = document.createElement('div');
                    imageWrapper.className = 'post-image-wrapper';
                    
                    const imageElem = document.createElement('img');
                    imageElem.className = 'post-image';
                    imageElem.src = imagePath;
                    imageElem.alt = `图片 ${index + 1}`;
                    imageElem.dataset.index = index;
                    
                    // 图片点击事件 - 打开灯箱
                    imageElem.addEventListener('click', function() {
                        openLightbox(imagePath, index);
                    });
                    
                    // 图片加载错误处理
                    imageElem.onerror = function() {
                        console.error('图片加载失败:', imagePath);
                        this.onerror = null;
                        this.src = '/static/uploads/default-image-error.jpg'; // 使用相同的默认错误图片路径
                        this.alt = '图片加载失败';
                        this.classList.add('image-error');
                    };
                    
                    imageWrapper.appendChild(imageElem);
                    imagesContainer.appendChild(imageWrapper);
                });
            } else {
                console.log('帖子没有图片');
            }
        }
        
        // 检查是否已点赞
        function checkLikeStatus() {
            if (!isLoggedIn) return;
            
            fetch(`/api/forum/posts/${postId}/like-status`)
                .then(response => response.json())
                .then(data => {
                    isLiked = data.isLiked;
                    if (isLiked) {
                        const likeBtn = document.getElementById('likeBtn');
                        likeBtn.classList.add('liked');
                        likeBtn.querySelector('i').className = 'fas fa-heart';
                    }
                })
                .catch(error => {
                    console.error('检查点赞状态失败:', error);
                });
        }
        
        // 点赞帖子
        async function toggleLike() {
            if (!isLoggedIn) {
                showLoginModal('请先登录后再点赞');
                return;
            }
            
            // 检查用户是否被禁言
            const isMuted = await checkMuteStatus();
            if (isMuted) {
                return;
            }
            
            fetch(`/api/forum/posts/${postId}/like`, {
                method: 'POST'
            })
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('点赞失败');
                }
            })
            .then(data => {
                const likeBtn = document.getElementById('likeBtn');
                
                if (!likeBtn) {
                    console.error('点赞按钮元素不存在');
                    return;
                }
                
                if (data.isLiked) {
                    likeBtn.classList.add('liked');
                    likeBtn.innerHTML = '<i class="fas fa-heart"></i>';
                    showToast('点赞成功！', 'success');
                } else {
                    likeBtn.classList.remove('liked');
                    likeBtn.innerHTML = '<i class="far fa-heart"></i>';
                    showToast('已取消点赞', 'info');
                }
            })
            .catch(error => {
                console.error('点赞失败:', error);
                showToast('点赞失败，请稍后再试', 'error');
            });
        }
        
        // 聚焦评论输入框
        function focusCommentInput() {
            if (!isLoggedIn) {
                showLoginModal('请先登录后再评论');
                return;
            }
            document.getElementById('commentInput').focus();
        }
        
        // 加载评论
        function loadComments() {
            fetch(`/api/forum/posts/${postId}/comments`)
                .then(response => response.json())
                .then(comments => {
                    const commentsContainer = document.getElementById('commentsList');
                    const commentsCount = document.getElementById('commentsCount');
                    
                    if (commentsCount) {
                    commentsCount.textContent = comments.length;
                    }
                    
                    if (comments.length === 0) {
                        commentsContainer.innerHTML = '<div class="no-comments">暂无评论，来发表第一条评论吧！</div>';
                        return;
                    }
                    
                    let commentsHTML = '';
                    
                    comments.forEach((comment, index) => {
                        // 格式化日期
                        const date = new Date(comment.createdAt);
                        const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
                        
                        commentsHTML += `
                            <div class="comment-item" style="--index: ${index}">
                                <div class="comment-header">
                                    <div class="comment-user"><i class="fas fa-user"></i> ${comment.username || '匿名用户'}</div>
                                    <div class="comment-date"><i class="far fa-clock"></i> ${formattedDate}</div>
                                </div>
                                <div class="comment-content">${comment.content}</div>
                            </div>
                        `;
                    });
                    
                    commentsContainer.innerHTML = commentsHTML;
                })
                .catch(error => {
                    console.error('加载评论失败:', error);
                    document.getElementById('commentsList').innerHTML = '<div>加载评论失败，请稍后再试</div>';
                });
        }
        
        // 添加评论到评论列表
        function addComment(comment) {
            const commentsList = document.getElementById('commentsList');
            
            if (!commentsList) {
                console.error('评论列表元素不存在');
                return;
            }
            
            // 创建评论元素
            const commentItem = document.createElement('div');
            commentItem.className = 'comment-item';
            commentItem.setAttribute('data-id', comment.id);
            
            // 格式化日期
            const date = new Date(comment.createdAt);
            const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
            
            // 设置评论内容
            commentItem.innerHTML = `
                <div class="comment-header">
                    <div class="comment-user"><i class="fas fa-user"></i> ${comment.username || '匿名用户'}</div>
                    <div class="comment-date"><i class="far fa-clock"></i> ${formattedDate}</div>
                </div>
                <div class="comment-content">${comment.content}</div>
            `;
            
            // 清除加载中或暂无评论的提示
            if (commentsList.querySelector('.loading') || commentsList.querySelector('.no-comments')) {
                commentsList.innerHTML = '';
            }
            
            // 添加到评论列表
            commentsList.insertBefore(commentItem, commentsList.firstChild);
            
            // 更新评论数
            const commentsCount = document.getElementById('commentsCount');
            if (commentsCount) {
                const currentCount = parseInt(commentsCount.textContent) || 0;
                commentsCount.textContent = currentCount + 1;
            }
        }

        // 提交评论
        async function submitComment() {
            if (!isLoggedIn) {
                showLoginModal('请先登录后再评论');
                return;
            }
            
            // 检查用户是否被禁言
            const isMuted = await checkMuteStatus();
            if (isMuted) {
                return;
            }
            
            const commentContent = document.getElementById('commentInput').value.trim();
            
            if (!commentContent) {
                showToast('评论内容不能为空', 'warning');
                return;
            }
            
            // 显示加载状态
            const submitBtn = document.getElementById('commentSubmit');
            const originalText = submitBtn.textContent;
            submitBtn.textContent = '提交中...';
            submitBtn.disabled = true;
            
            fetch(`/api/forum/posts/${postId}/comments`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    content: commentContent
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('提交评论失败');
                }
                return response.json();
            })
            .then(data => {
                // 清空输入框
                document.getElementById('commentInput').value = '';
                
                // 添加新评论到评论列表
                addComment({
                    id: data.id,
                    postId: postId,
                    userId: userId,
                    username: username,
                    content: commentContent,
                    createdAt: new Date().toISOString()
                });
                
                // 显示成功消息
                showToast('评论发表成功！', 'success');
                
                // 恢复按钮状态
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            })
            .catch(error => {
                console.error('提交评论失败:', error);
                showToast('提交评论失败，请稍后再试', 'error');
                
                // 恢复按钮状态
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            });
        }
        
        // 显示举报模态框
        function showReportModal() {
            if (!isLoggedIn) {
                showLoginModal('请先登录后再举报');
                return;
            }
            
            document.getElementById('reportModal').style.display = 'flex';
        }
        
        // 关闭举报模态框
        function closeReportModal() {
            document.getElementById('reportModal').style.display = 'none';
            document.getElementById('reportReason').value = '';
            document.getElementById('reportDetail').value = '';
        }
        
        // 提交举报
        function submitReport() {
            const reportReasonSelect = document.getElementById('reportReason');
            const selectedReason = reportReasonSelect.value;
            if (!selectedReason) {
                showToast('请选择举报原因', 'warning');
                return;
            }
            
            const detail = document.getElementById('reportDetail').value.trim();
            
            console.log('准备提交举报:', {
                postId: postId,
                reason: selectedReason,
                detail: detail
            });
            
            // 提交举报信息到后端
            fetch('/api/forum/report', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    postId: postId,
                    reason: selectedReason,
                    detail: detail
                })
            })
            .then(response => {
                console.log('举报API响应状态:', response.status);
                if (!response.ok) {
                    return response.json().then(errorData => {
                        console.error('举报失败详情:', errorData);
                        throw new Error(errorData.error || errorData.message || '提交举报失败');
                    });
                }
                return response.json();
            })
            .then(data => {
                console.log('举报成功:', data);
                closeReportModal();
                showToast('举报提交成功，我们会尽快处理！', 'success');
            })
            .catch(error => {
                console.error('提交举报失败:', error);
                showToast(error.message || '提交举报失败，请稍后再试', 'error');
            });
        }
        
        // 显示登录提示模态框
        function showLoginModal(message) {
            document.getElementById('modalMessage').textContent = message || '请先登录后再进行操作';
            document.getElementById('loginModal').style.display = 'flex';
        }
        
        // 关闭登录提示模态框
        function closeModal() {
            document.getElementById('loginModal').style.display = 'none';
        }
        
        // 跳转到登录页面
        function goToLogin() {
            // 获取当前模态框消息，判断是否为回测相关
            const modalMessage = document.getElementById('modalMessage').textContent;
            if (modalMessage.includes('回测')) {
                window.location.href = '/login?redirect=/backtest';
            } else {
                window.location.href = '/login?redirect=/forum/post/' + postId;
            }
        }
        
        // 检查登录状态并跳转到回测页面或显示登录提示
        function checkLoginForBacktest() {
            if (isLoggedIn) {
                // 已登录，跳转到回测页面
                window.location.href = '/backtest';
            } else {
                // 未登录，显示登录提示模态框
                showLoginModal('请先登录以使用回测功能');
            }
        }
        
        // 打开灯箱
        function openLightbox(imagePath, index) {
            console.log('打开灯箱，图片路径:', imagePath, '索引:', index);
            
            // 修正图片路径处理逻辑
            if (!imagePath.startsWith('http://') && !imagePath.startsWith('https://')) {
                // 如果是相对路径，需要处理
                if (imagePath.startsWith('/uploads/')) {
                    // 将/uploads/转换为/static/uploads/
                    imagePath = '/static' + imagePath;
                    console.log('灯箱中修正后的图片路径:', imagePath);
                } else if (!imagePath.startsWith('/static/')) {
                    // 如果既不是以/static/开头，也不是以/uploads/开头，则添加/static/前缀
                    imagePath = '/static' + (imagePath.startsWith('/') ? '' : '/') + imagePath;
                    console.log('灯箱中修正后的图片路径:', imagePath);
                }
            }
            
            currentImageIndex = index;
            const lightbox = document.getElementById('lightbox');
            const lightboxImage = document.getElementById('lightbox-image');
            
            lightboxImage.src = imagePath;
            lightboxImage.onerror = function() {
                console.error('灯箱图片加载失败:', imagePath);
                this.onerror = null;
                this.src = '/static/uploads/default-image-error.jpg';
            };
            
            lightbox.style.display = 'flex';
            lightbox.classList.add('active');
            document.body.style.overflow = 'hidden'; // 防止滚动
        }
        
        // 关闭灯箱
        function closeLightbox() {
            const lightbox = document.getElementById('lightbox');
            lightbox.style.display = 'none';
            lightbox.classList.remove('active');
            document.body.style.overflow = ''; // 恢复滚动
        }
        
        // 显示上一张图片
        function showPrevImage() {
            if (!window.postData || !window.postData.images || window.postData.images.length <= 1) {
                console.log('没有足够的图片进行导航');
                return;
            }
            
            currentImageIndex = (currentImageIndex - 1 + window.postData.images.length) % window.postData.images.length;
            console.log('显示上一张图片，当前索引:', currentImageIndex);
            
            // 确保图片路径正确
            let imagePath = window.postData.images[currentImageIndex].image_path || window.postData.images[currentImageIndex].imagePath;
            console.log('原始图片路径:', imagePath);
            
            if (!imagePath) {
                console.error('图片路径为空');
                imagePath = '/static/uploads/default-image-error.jpg';
            } else {
                // 修正图片路径处理逻辑
                if (!imagePath.startsWith('http://') && !imagePath.startsWith('https://')) {
                    // 如果是相对路径，需要处理
                if (imagePath.startsWith('/uploads/')) {
                        // 将/uploads/转换为/static/uploads/
                    imagePath = '/static' + imagePath;
                    console.log('修正后的图片路径:', imagePath);
                    } else if (!imagePath.startsWith('/static/')) {
                        // 如果既不是以/static/开头，也不是以/uploads/开头，则添加/static/前缀
                        imagePath = '/static' + (imagePath.startsWith('/') ? '' : '/') + imagePath;
                        console.log('修正后的图片路径:', imagePath);
                    }
                }
            }
            
            document.getElementById('lightbox-image').src = imagePath;
        }
        
        // 显示下一张图片
        function showNextImage() {
            if (!window.postData || !window.postData.images || window.postData.images.length <= 1) {
                console.log('没有足够的图片进行导航');
                return;
            }
            
            currentImageIndex = (currentImageIndex + 1) % window.postData.images.length;
            console.log('显示下一张图片，当前索引:', currentImageIndex);
            
            // 确保图片路径正确
            let imagePath = window.postData.images[currentImageIndex].image_path || window.postData.images[currentImageIndex].imagePath;
            console.log('原始图片路径:', imagePath);
            
            if (!imagePath) {
                console.error('图片路径为空');
                imagePath = '/static/uploads/default-image-error.jpg';
            } else {
                // 修正图片路径处理逻辑
                if (!imagePath.startsWith('http://') && !imagePath.startsWith('https://')) {
                    // 如果是相对路径，需要处理
                if (imagePath.startsWith('/uploads/')) {
                        // 将/uploads/转换为/static/uploads/
                    imagePath = '/static' + imagePath;
                    console.log('修正后的图片路径:', imagePath);
                    } else if (!imagePath.startsWith('/static/')) {
                        // 如果既不是以/static/开头，也不是以/uploads/开头，则添加/static/前缀
                        imagePath = '/static' + (imagePath.startsWith('/') ? '' : '/') + imagePath;
                        console.log('修正后的图片路径:', imagePath);
                    }
                }
            }
            
            document.getElementById('lightbox-image').src = imagePath;
        }

        // 格式化日期函数
        function formatDate(dateString) {
            if (!dateString) return '';
            
            const date = new Date(dateString);
            if (isNaN(date)) return dateString;
            
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            
            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }

        // 添加显示美观消息的函数
        function showToast(message, type = 'info', title = '') {
            const toastContainer = document.getElementById('toastContainer');
            
            // 检查toastContainer是否存在
            if (!toastContainer) {
                console.error('Toast容器不存在');
                return;
            }
            
            // 创建toast元素
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            
            // 根据类型设置图标
            let icon = '';
            switch(type) {
                case 'success':
                    icon = '<i class="fas fa-check-circle toast-icon"></i>';
                    if (!title) title = '成功';
                    break;
                case 'error':
                    icon = '<i class="fas fa-exclamation-circle toast-icon"></i>';
                    if (!title) title = '错误';
                    break;
                case 'warning':
                    icon = '<i class="fas fa-exclamation-triangle toast-icon"></i>';
                    if (!title) title = '警告';
                    break;
                default:
                    icon = '<i class="fas fa-info-circle toast-icon"></i>';
                    if (!title) title = '提示';
                    break;
            }
            
            // 设置toast内容
            toast.innerHTML = `
                ${icon}
                <div class="toast-content">
                    <div class="toast-title">${title}</div>
                    <div class="toast-message">${message}</div>
                </div>
                <div class="toast-progress"></div>
            `;
            
            // 添加到容器
            toastContainer.appendChild(toast);
            
            // 使用setTimeout让CSS动画生效
            setTimeout(() => {
                toast.style.opacity = '1';
                toast.style.transform = 'translateX(0)';
            }, 10);
            
            // 1.5秒后移除
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transform = 'translateX(10%)';
                
                setTimeout(() => {
                    toastContainer.removeChild(toast);
                }, 300);
            }, 1500);
        }

        // 检查用户是否被禁言
        async function checkMuteStatus() {
            try {
                const response = await fetch('/api/check-mute-status');
                
                if (response.status === 403) {
                    // 用户已被禁言
                    const data = await response.json();
                    // 设置禁言信息
                    document.getElementById('muteMessage').textContent = data.detail || '您的账户已被禁言，无法发言。';
                    document.getElementById('muteReason').textContent = data.reason || '违反平台规则';
                    
                    // 显示禁言模态框
                    document.getElementById('muteModal').style.display = 'flex';
                    return true;
                } else if (response.status === 401) {
                    // 用户未登录
                    showLoginModal();
                    return true;
                } else if (response.ok) {
                    // 用户未被禁言
                    return false;
                } else {
                    console.error('检查禁言状态失败:', response.status);
                    return false;
                }
            } catch (error) {
                console.error('检查禁言状态出错:', error);
                return false;
            }
        }
    </script>
    
    <!-- 免责声明和版权信息 -->
    <div class="disclaimer-container">
        <div class="disclaimer-text">
            <strong>免责声明：</strong>本论坛内容由用户发布，不代表FinData平台立场。用户应对自己发表的内容负责，遵守相关法律法规。
            发布内容前请慎重考虑，任何发布的言论、图片一经发布将无法删除，平台有权根据相关规定对内容进行管理。
            请勿发布违法、虚假、误导性金融信息，不得利用本平台从事非法活动。
        </div>
        <div class="copyright">
            © 2023-2024 FinData. All Rights Reserved. 保留所有权利。
        </div>
    </div>
</body>
</html>
